<template>
  <div class='page-container'> 子组件1内容
    <span>展示接收到的值:{{ list }}</span>
    <el-button @click="sendValue">发送到父组件</el-button>
    {{ state.num }}

    <div class="groundSon">
      <grandSon></grandSon>
    </div>
  </div>

</template>
<script setup lang='ts'>
/**
 * 模块引入
 */
import grandSon from './grandSon.vue';
import { reactive, ref, defineExpose } from 'vue';
// 注册一遍自定义事件
const emit = defineEmits(["sendToParent", "sendhaha"])
let propsssss = defineProps({
  list: {
    type: Object
  }
})
/**
 * 数据
 */
const state = reactive({ num: 12 });

/**
 * 功能方法
 */

const handleAdd = function () {
  state.num++
}
const sendValue = function () {
  // V2
  // this.$emit('自定义事件',传递的值)
  // V3 
  emit("sendToParent", [2, 4, 6])

}

defineExpose({
  handleAdd
})
</script>
<style lang='scss' scoped>
.page-container {
  width: 200px;
  height: 100px;
  border: 1px solid blue;
}

.groundSon {
  width: 200px;
  height: 100px;
  border: 1px solid pink;
}
</style>